<template>
<div id="admissions-officer">
  <navigation></navigation>
  <div class="banner">
    <p>ADMISSIONS TEAM</p>
    <p>招生官团队</p>
    <div class="item"></div>
  </div>
  <video poster="../../assets/images/home/poster.jpg" controls="" name="media" width="100%"><source src="https://1257328390.vod2.myqcloud.com/5f781e67vodgzp1257328390/01b3b7ea5285890781777127100/4Jo3Y7S6WSIA.mp4" type="video/mp4"></video>
  <div class="tab">
    <p @click="chooseTab(1)" :class="[tabIndex == 1 ? 'active' : '']">本科</p>
    <p @click="chooseTab(2)" :class="[tabIndex == 2 ? 'active' : '']">艺术类</p>
    <p @click="chooseTab(3)" :class="[tabIndex == 3 ? 'active' : '']">研究生</p>
  </div>
  <div v-if="tabIndex == 1" class="officers">
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-2.jpg" />
      <div class="item-bottom">
        <p>帕梅拉女士</p>
        <p>Ms. Pamela</p>
        <p>青胜留学美本申请<br>的美方专业顾问</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-3.jpg" />
      <div class="item-bottom">
        <p>威尔逊先生</p>
        <p>Mr. Wilson</p>
        <p>青胜留学美本申请<br>的美方专业顾问</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-4.jpg" />
      <div class="item-bottom">
        <p>凯恩先生</p>
        <p>Mr.Kane</p>
        <p>青胜留学美本、美研申<br>请的美方专业顾问</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-5.jpg" />
      <div class="item-bottom">
        <p>玛德琳女士</p>
        <p>Ms.Madeleine</p>
        <p>青胜留学美本、美研申<br>请的美方专业顾问</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-6.jpg" />
      <div class="item-bottom">
        <p>汤姆逊先生</p>
        <p>Mr. Thomson</p>
        <p>青胜留学美本、美研申<br>请的美方专业顾问</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-7.jpg" />
      <div class="item-bottom">
        <p>罗伯特先生</p>
        <p>Mr. Robert</p>
        <p>青胜留学美本、美研申<br>请的美方专业顾问</p>
      </div>
    </div>
  </div>
  <div v-if="tabIndex == 2" class="officers">
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-9.jpg" />
      <div class="item-bottom">
        <p>Christ Riffs</p>
        <p>Christ Riffs</p>
        <p>青胜留学美艺术申请的<br>专业顾问</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-10.jpg" />
      <div class="item-bottom">
        <p>Steff Geissbuhler</p>
        <p>Steff Geissbuhler</p>
        <p>青胜留美艺术学院<br>招生官</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-11.jpg" />
      <div class="item-bottom">
        <p>安德森费尔曼</p>
        <p>Anderson Feldman</p>
        <p>前耶鲁大学艺术学院<br>招生官</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-12.jpg" />
      <div class="item-bottom">
        <p>安吉丽娜 劳森</p>
        <p>Angelina Lawson</p>
        <p>前加州艺术学院招生官</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-13.jpg" />
      <div class="item-bottom">
        <p>罗伯托费里尼</p>
        <p>Roberto Fellini</p>
        <p>青胜留学美本申请的美<br>方专业顾问</p>
      </div>
    </div>
  </div>
  <div v-if="tabIndex == 3" class="officers">
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-14.jpg" />
      <div class="item-bottom">
        <p>南希女士</p>
        <p>Ms. Nancy</p>
        <p>青胜留学美研申请的专<br>业顾问</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-15.jpg" />
      <div class="item-bottom">
        <p>凯文先生</p>
        <p>Mr. Kevin</p>
        <p>青胜留学美研申请的专<br>业顾问</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-16.jpg" />
      <div class="item-bottom">
        <p>亚当先生</p>
        <p>Mr. Adam</p>
        <p>青胜留学美研申请的专<br>业顾问</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-17.jpg" />
      <div class="item-bottom">
        <p>凯瑟琳女士</p>
        <p>Ms.Catherine</p>
        <p>青胜留学美研申请的专业顾问</p>
      </div>
    </div>
    <div class="item">
      <img src="../../assets/images/admissionsOfficer/officer-18.jpg" />
      <div class="item-bottom">
        <p>罗根先生</p>
        <p>Mr.Rogan</p>
        <p>青胜留学美研申请的专<br>业顾问</p>
      </div>
    </div>
  </div>
  <pageFooter></pageFooter>
</div>
</template>
<script>
import navigation from "@/components/navigation/index";
import pageFooter from "@/components/footer/index";

import {
  NetworkUtil
} from "@/lib/util"

export default {
  components: {
    navigation,
    pageFooter
  },
  data() {
    return {
      tabIndex: 1
    }
  },
  created() {

  },
  methods: {
    chooseTab(tabIndex) {
      this.tabIndex = tabIndex
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "index.less";
</style>
